<template>
  <div class="app-container-form">
    <el-row :gutter="30">
      <el-col :span="6">
        <div class="title">控件中心</div>
        <div class="content">
          <div
            class="assembly"
            v-for="(item, index) in assemblys"
            :key="item"
            @click="f_AddAssembly(index)"
          >
            {{ item.text }}
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="title">预览</div>
        <div class="content mt-[10px]">
          <div
            :class="{
              active: assemblyIndex == index,
              'm-item': true,
              ml10: item.level == 2,
              ml20: item.level == 3,
            }"
            v-for="(item, index) in listFu"
            :key="item"
            @click="f_SelectAssembly(index, item.type)"
          >
            <div class="title-wrap">
              <div class="title-wrap-l">
                <span
                  v-if="item.required"
                  class="color-[red] mr-[4px] font-bold"
                  >*</span
                >{{ item.title }}
              </div>
              <div class="title-wrap-r">
                <span
                  v-if="
                    currentActiveOneIndex === 999 &&
                    (item.type == 3 || item.type == 4) &&
                    item.level == 1
                  "
                  class="text-[12px] mt-[-4px] vertical-top"
                  @click="f_AddAssemblyTwo(index, item.id, 2)"
                  >添加二级控件</span
                >
                <span
                  v-if="
                    currentActiveOneIndex == index &&
                    (item.type == 3 || item.type == 4) &&
                    item.level == 1
                  "
                  class="text-[12px] mt-[-4px] vertical-top"
                  @click="currentActiveOneIndex = 999"
                  >取消添加二级控件</span
                >
                <span
                  v-if="
                    currentActiveOneIndex === 999 &&
                    (item.type == 3 || item.type == 4) &&
                    item.level == 2
                  "
                  class="text-[12px] mt-[-4px] vertical-top"
                  @click="f_AddAssemblyTwo(index, item.id, 3)"
                  >添加三级控件</span
                >
                <span
                  v-if="
                    currentActiveOneIndex == index &&
                    (item.type == 3 || item.type == 4) &&
                    item.level == 2
                  "
                  class="text-[12px] mt-[-4px] vertical-top"
                  @click="currentActiveOneIndex = 999"
                  >取消添加三级控件</span
                >
                <i-ep-edit
                  v-if="item.level == 2 || item.level == 3"
                  @click.stop="
                    f_EditBindValue(item.parentId, item.id, item.parentValue)
                  "
                  class="mr-[2px] text-size-[11px]"
                />
                <i-ep-top
                  @click.stop="f_AssemblyUp(index)"
                  class="mr-[2px] text-size-[11px]"
                />
                <i-ep-bottom
                  @click.stop="f_AssemblyDown(index)"
                  class="mr-[2px] text-size-[11px]"
                />
                <i-ep-delete
                  @click.stop="f_AssemblyDel(index)"
                  class="mr-[2px] text-size-[11px]"
                />
              </div>
            </div>
            <div class="con-wrap">
              <div v-if="item.type == 1" style="margin: 4px 0">
                <el-input
                  v-model="item.value"
                  disabled
                  placeholder="请输入内容"
                  maxlength="20"
                  show-word-limit
                />
                <div
                  class="color-[red] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue == ''
                  "
                >
                  未配置父级关联选项
                </div>
                <div
                  class="color-[green] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue != ''
                  "
                >
                  已配置父级关联选项 -
                  <span
                    class="color-[red] font-700 text-size-[17px!important]"
                    >{{ item.parentValue }}</span
                  >
                </div>
              </div>
              <div v-if="item.type == 2" style="margin: 4px 0">
                <el-input
                  type="textarea"
                  disabled
                  autosize
                  placeholder="请输入内容"
                  v-model="item.value"
                  maxlength="50"
                  show-word-limit
                />
                <div
                  class="color-[red] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue == ''
                  "
                >
                  未配置父级关联选项
                </div>
                <div
                  class="color-[green] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue != ''
                  "
                >
                  已配置父级关联选项 -
                  <span
                    class="color-[red] font-700 text-size-[17px!important]"
                    >{{ item.parentValue }}</span
                  >
                </div>
              </div>
              <div v-if="item.type == 3" style="margin: 4px 0">
                <div>
                  <el-radio-group v-model="item.value">
                    <el-radio
                      disabled
                      :label="element.title"
                      v-for="element in item.option"
                      :key="element"
                    />
                  </el-radio-group>
                  <div
                    class="color-[red] mt-[10px]"
                    v-if="
                      (item.level == 2 || item.level == 3) &&
                      item.parentValue == ''
                    "
                  >
                    未配置父级关联选项
                  </div>
                  <div
                    class="color-[green] mt-[10px]"
                    v-if="
                      (item.level == 2 || item.level == 3) &&
                      item.parentValue != ''
                    "
                  >
                    已配置父级关联选项 -
                    <span
                      class="color-[red] font-700 text-size-[17px!important]"
                      >{{ item.parentValue }}</span
                    >
                  </div>
                </div>
              </div>
              <div v-if="item.type == 4" style="margin: 4px 0">
                <el-checkbox-group v-model="item.value">
                  <el-checkbox
                    disabled
                    :label="element.title"
                    name="type"
                    v-for="element in item.option"
                    :key="element"
                  />
                </el-checkbox-group>
                <div
                  class="color-[red] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue == ''
                  "
                >
                  未配置父级关联选项
                </div>
                <div
                  class="color-[green] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue != ''
                  "
                >
                  已配置父级关联选项 -
                  <span
                    class="color-[red] font-700 text-size-[17px!important]"
                    >{{ item.parentValue }}</span
                  >
                </div>
              </div>
              <div v-if="item.type == 5">
                <!-- <img src="../../assets/upload.png" style="height: 50px" /> -->
                <div
                  class="color-[red] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue == ''
                  "
                >
                  未配置父级关联选项
                </div>
                <div
                  class="color-[green] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue != ''
                  "
                >
                  已配置父级关联选项
                </div>
              </div>
              <div v-if="item.type == 6">
                <!-- <img src="../../assets/scan.png" style="height: 50px" /> -->
                <div
                  class="color-[red] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue == ''
                  "
                >
                  未配置父级关联选项
                </div>
                <div
                  class="color-[green] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue != ''
                  "
                >
                  已配置父级关联选项 -
                  <span
                    class="color-[red] font-700 text-size-[17px!important]"
                    >{{ item.parentValue }}</span
                  >
                </div>
              </div>
              <div v-if="item.type == 7">
                <el-date-picker
                  v-model="item.value"
                  type="datetime"
                  placeholder="请选择开始时间"
                  disabled
                />
                <div
                  class="color-[red] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue == ''
                  "
                >
                  未配置父级关联选项
                </div>
                <div
                  class="color-[green] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue != ''
                  "
                >
                  已配置父级关联选项 -
                  <span
                    class="color-[red] font-700 text-size-[17px!important]"
                    >{{ item.parentValue }}</span
                  >
                </div>
              </div>
              <div v-if="item.type == 8">
                收费
                <div
                  class="color-[red] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue == ''
                  "
                >
                  未配置父级关联选项
                </div>
                <div
                  class="color-[green] mt-[10px]"
                  v-if="
                    (item.level == 2 || item.level == 3) &&
                    item.parentValue != ''
                  "
                >
                  已配置父级关联选项 -
                  <span
                    class="color-[red] font-700 text-size-[17px!important]"
                    >{{ item.parentValue }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col v-if="listFu.length && !ifEditBindValue" :span="9">
        <div class="title">数据表单</div>
        <el-form ref="rForm" label="80px" class="mt-[20px]">
          <div class="sub-title">
            <span class="dot"></span>标题<i
              style="
                margin-left: 10px;
                font-size: 12px;
                font-style: normal;
                color: #999;
              "
              >(15个字)</i
            >
          </div>
          <el-form-item>
            <div class="mt-[8px] w-[100%]">
              <el-input
                v-model="listFu[assemblyIndex].title"
                maxlength="20"
                show-word-limit
                placeholder="请输入标题"
                size="default"
              />
            </div>
          </el-form-item>
          <div class="sub-title" v-if="listFu[assemblyIndex].type != 8">
            <span class="dot"></span>是否必填
          </div>
          <el-form-item label="" v-if="listFu[assemblyIndex].type != 8">
            <el-radio-group v-model="listFu[assemblyIndex].required">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <div
            v-if="listFu[assemblyIndex].type == 3"
            class="sub-title h-[28px]"
          >
            <span class="dot"></span>选型对应值
            <el-button
              type="primary"
              plain
              round
              size="small"
              class="add-radio float-right mr-[5px]"
              @click="f_AddRadio"
            >
              +
            </el-button>
          </div>
          <el-form-item v-if="listFu[assemblyIndex].type == 3">
            <div
              v-for="(item, index) in listFu[assemblyIndex].option"
              :key="item"
              style="position: relative"
              class="w-[100%] mt-[5px] mb-[5px]"
            >
              <el-input
                v-model="listFu[assemblyIndex].option[index].title"
                placeholder="请输入内容"
                maxlength="20"
                size="default"
              />
              <el-button
                type="danger"
                plain
                round
                size="small"
                class="add-radio float-right"
                @click="radioCheckboxDel"
                style="position: absolute; top: 4px; right: 5px"
                v-if="index > 1"
              >
                -
              </el-button>
            </div>
          </el-form-item>
          <div
            v-if="listFu[assemblyIndex].type == 4"
            class="sub-title h-[28px]"
          >
            <span class="dot"></span>选型对应值
            <el-button
              type="primary"
              round
              plain
              size="small"
              class="add-radio float-right"
              @click="f_AddCheckbox"
            >
              +
            </el-button>
          </div>
          <el-form-item v-if="listFu[assemblyIndex].type == 4">
            <div
              v-for="(item, index) in listFu[assemblyIndex].option"
              :key="item"
              style="position: relative"
              class="w-[100%] mt-[5px] mb-[5px]"
            >
              <div>
                <el-input
                  v-model="listFu[assemblyIndex].option[index].title"
                  placeholder="请输入内容"
                  maxlength="20"
                  size="default"
                />
              </div>
              <i
                class="el-icon el-icon-delete"
                @click="radioCheckboxDel(index)"
                style="position: absolute; top: 14px; right: 10px"
              ></i>
            </div>
          </el-form-item>
          <div
            v-if="listFu[assemblyIndex].type == 8"
            class="sub-title h-[28px]"
          >
            <span class="dot"></span>上传收款码
          </div>
          <div v-if="listFu[assemblyIndex].type == 8">
            <!-- <img src="../../../assets/upload.png" style="height: 80px" />
						 -->

            <el-upload
              v-model:file-list="fileList"
              :auto-upload="false"
              multiple
              :limit="1"
              :on-change="changeFile"
            >
              <el-button type="primary">点击上传收款码</el-button>
            </el-upload>
          </div>
        </el-form>
      </el-col>
      <el-col v-else :span="9">
        <div class="title">绑定控件</div>
        <div>
          <el-radio-group
            v-model="bindValue"
            size="small"
            @change="f_ChangeBindValue"
          >
            <div
              v-for="item in currentBindData"
              :key="item"
              class="mt-[20px] w-[100%]"
            >
              <el-radio :value="item.title" :label="item.title" border>{{
                item.title
              }}</el-radio>
            </div>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>

    <div class="footer">
      <el-button type="warning" @click="f_CloseDialog">
        <i-ep-refresh />
        取消</el-button
      >
      <el-button type="primary" @click="f_HandleConfirm"
        ><i-ep-check />确认</el-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "Add",
  inheritAttrs: false,
});
import { find, forEach } from "lodash";
import { reactive } from "vue";
// import { api_upload } from "@/api/index";

const props = defineProps({
  inspContent: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const emits = defineEmits(["close", "confirm"]);
const fileList = ref<UploadUserFile[]>([]);
const assemblys = ref([
  {
    text: "单行输入框",
    type: 1,
  },
  {
    text: "多行输入框",
    type: 2,
  },
  {
    text: "单选框 + 自定义框",
    type: 3,
  },
  {
    text: "多选框 + 自定义框",
    type: 4,
  },
  {
    text: "图片上传",
    type: 5,
  },
  {
    text: "扫一扫",
    type: 6,
  },
  {
    text: "时间选择器",
    type: 7,
  },
  // {
  //   text: "收费",
  //   type: 8,
  // },
]);

const listFu = reactive(props.inspContent);

const assemblyIndex = ref(0);
const currentActiveOneIndex = ref(999); // 当前激活的二级控件
const currentActiveId = ref(0); // 当前激活的控件的id
const currentBindData = ref([]); // 当前绑定值数据

const ifEditBindValue = ref(false); // 是否显示绑定值
const bindValue = ref(""); // 绑定的值，用于临时存储
const currentAddLevel = ref(2); // 当前新增控件的级别

const currentActiveIdLevel = ref(0);

// 上传文件
const changeFile = (uploadFile) => {
  let formData = new FormData();
  formData.append("Category", "WorkOrder");
  formData.append("Source", "WeiBao");
  formData.append("SourceKey", "");
  formData.append("Owner", "工单3.0");
  formData.append("File", uploadFile.raw);
  // api_upload(formData).then(({ data }) => {
  //   ElMessage.success("上传成功");
  //   listFu.children[assemblyIndex.value].value = JSON.stringify(data);
  //   return data;
  // });
};

// 编辑控件绑定的值
function f_EditBindValue(parentId, id, parentValue) {
  currentActiveId.value = id;
  bindValue.value = parentValue;
  ifEditBindValue.value = true;
  let tempData = find(listFu, { id: parentId });
  if (tempData) {
    currentBindData.value = tempData.option;
  }
}

// 改变绑定值
function f_ChangeBindValue() {
  for (let i = 0; i < listFu.length; i++) {
    if (currentActiveId.value == listFu[i].id) {
      listFu[i].parentValue = bindValue.value;
      return;
    }
  }
}

// 确认
function f_HandleConfirm() {
  // 标题不能为空
  // 标题不能重复
  // 单选框最少2个 不能有重复
  // 多选款最少2个 不能有重复
  // 如果有 二级 二级必须绑定父级
  // 如果有 三级 三级必须绑定父级
  let msg = "";
  let titleArr = [];
  listFu.forEach((item) => {
    if (item.title == "") {
      msg += "控件标题不能为空！";
    }
    titleArr.push(item.title);
    let optionArr = [];
    if (item.type == 3 || item.type == 4) {
      item.option.forEach((ele) => {
        optionArr.push(ele.title);
      });
      if (item.option.length != [...new Set(optionArr)].length) {
        msg += "控件选项不能重复！";
      }
    }

    if ((item.level == 2 || item.level == 3) && item.parentValue == "") {
      msg += "二级或三级控件没有指定对应选项！";
    }
  });
  if (listFu.length != [...new Set(titleArr)].length) {
    msg += "控件标题不能重复！";
  }
  if (msg.length) {
    ElMessage.error(msg);
    return;
  }
  emits("confirm", listFu);
}

//点击增加控件
function f_AddAssembly(item) {
  let tempId = new Date().getTime();
  if (currentActiveOneIndex.value == 999) {
    var len = Number(listFu.length);
    switch (item) {
      case 0:
        listFu.push({
          //单行输入框
          id: tempId,
          required: 0,
          sort: len++,
          title: "单行输入框",
          type: 1,
          value: "",
          level: 1,
        });
        break;
      case 1:
        listFu.push({
          //多行输入框
          id: tempId,
          required: 0,
          sort: len++,
          title: "多行输入框",
          type: 2,
          value: "",
          level: 1,
        });
        break;
      case 2:
        listFu.push({
          //单选+自定义框
          customValue: "",
          id: tempId,
          option: [
            {
              title: "选项1",
            },
            {
              title: "选项2",
            },
          ],
          required: 0,
          sort: len++,
          title: "单选 + 自定义框",
          type: 3,
          value: "",
          requiredInput: 0,
          children: [],
          level: 1,
        });
        break;
      case 3:
        listFu.push({
          //多选+自定义框
          customValue: "",
          option: [
            {
              title: "选项1",
            },
            {
              title: "选项2",
            },
          ],
          id: tempId,
          required: 0,
          sort: len++,
          type: 4,
          title: "多选 + 自定义框",
          value: "",
          requiredInput: 0,
          children: [],
          level: 1,
        });
        break;
      case 4:
        listFu.push({
          //图片上传
          id: "0",
          required: 0,
          sort: len++,
          title: "图片上传",
          type: 5,
          value: "",
          level: 1,
        });
        break;
      case 5:
        listFu.push({
          //时间选择器
          id: tempId,
          required: 0,
          sort: len++,
          title: "扫一扫",
          type: 6,
          value: "",
          level: 1,
        });
        break;
      case 6:
        listFu.push({
          //收费
          id: tempId,
          required: 0,
          sort: len++,
          title: "时间选择器",
          type: 7,
          value: "",
          level: 1,
        });
        break;
      case 7:
        listFu.push({
          //收费
          id: tempId,
          required: 0,
          sort: len++,
          title: "收费",
          type: 8,
          value: "",
          level: 1,
        });
        break;
      default:
        break;
    }
  } else {
    var len = Number(listFu.length);
    switch (item) {
      case 0:
        listFu.push({
          //单行输入框
          id: tempId,
          required: 0,
          sort: len++,
          title: "单行输入框",
          type: 1,
          value: "",
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: currentAddLevel.value,
        });
        break;
      case 1:
        listFu.push({
          //多行输入框
          id: tempId,
          required: 0,
          sort: len++,
          title: "多行输入框",
          type: 2,
          value: "",
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: currentAddLevel.value,
        });
        break;
      case 2:
        listFu.push({
          //单选+自定义框
          customValue: "",
          id: tempId,
          option: [
            {
              title: "选项1",
            },
            {
              title: "选项2",
            },
          ],
          required: 0,
          sort: len++,
          title: "单选 + 自定义框",
          type: 3,
          value: "",
          requiredInput: 0,
          children: [],
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: currentAddLevel.value,
        });
        break;
      case 3:
        listFu.push({
          //多选+自定义框
          customValue: "",
          option: [
            {
              title: "选项1",
            },
            {
              title: "选项2",
            },
          ],
          id: tempId,
          required: 0,
          sort: len++,
          type: 4,
          title: "多选 + 自定义框",
          value: "",
          requiredInput: 0,
          children: [],
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: currentAddLevel.value,
        });
        break;
      case 4:
        listFu.push({
          //图片上传
          id: tempId,
          required: 0,
          sort: len++,
          title: "图片上传",
          type: 5,
          value: "图片",
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: 2,
        });
        break;
      case 5:
        listFu.push({
          //时间选择器
          id: tempId,
          required: 0,
          sort: len++,
          title: "扫一扫",
          type: 6,
          value: "",
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: currentAddLevel.value,
        });
        break;
      case 6:
        listFu.push({
          //收费
          id: "0",
          required: 0,
          sort: len++,
          title: "时间选择器",
          type: 7,
          value: "",
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: currentAddLevel.value,
        });
        break;
      case 7:
        listFu.push({
          //收费
          id: tempId,
          required: 0,
          sort: len++,
          title: "收费",
          type: 8,
          value: "",
          parentId: currentActiveIdLevel.value,
          parentValue: "",
          level: currentAddLevel.value,
        });
        break;
      default:
        break;
    }
  }
}

//点击增加控件 二级控件
function f_AddAssemblyTwo(index, id, level) {
  currentActiveOneIndex.value = index;
  // currentActiveId.value = id;
  currentActiveIdLevel.value = id;
  currentAddLevel.value = level;
}

//增加配置项 radio
function f_AddRadio() {
  listFu[assemblyIndex.value].option.push({
    title: "选项值",
  });
}

//增加配置项 checkbox
function f_AddCheckbox() {
  listFu[assemblyIndex.value].option.push({
    title: "选项值",
  });
}

// 删除radio或者CheckBox选项
function radioCheckboxDel(index) {
  if (listFu[assemblyIndex.value].option.length > 1) {
    listFu[assemblyIndex.value].option.splice(index, 1);
  } else {
    ElMessage.error("至少保留一项！");
  }
}

//选择控件
function f_SelectAssembly(index, type) {
  assemblyIndex.value = index;
  ifEditBindValue.value = false;
  if (type == 8 && typeof listFu[assemblyIndex.value].value == "string") {
    listFu[assemblyIndex.value].value = JSON.parse(
      listFu[assemblyIndex.value].value
    );
    fileList.value = [{ name: listFu[assemblyIndex.value].value.name }];
  }
}

// 向下移动
function f_AssemblyDown(index) {
  if (index + 1 != listFu.length) {
    const temp = listFu[index];
    listFu.splice(index + 2, 0, temp);
    listFu.splice(index, 1);
  } else {
    ElMessage.error("已经处于底部，无法下移！");
  }
}
//向上移动
function f_AssemblyUp(index) {
  if (index != 0) {
    const temp = listFu[index];
    listFu.splice(index - 1, 0, temp);
    listFu.splice(index + 1, 1);
  } else {
    ElMessage.error("已经处于顶部，无法上移");
  }
}
//删除控件
function f_AssemblyDel(index) {
  assemblyIndex.value = 0;
  listFu.splice(index, 1);
}

// 关闭弹框
function f_CloseDialog() {
  emits("close");
}
</script>

<style lang="scss" scoped>
.app-container-form {
  padding: 10px 15px 15px !important;
  font-size: 12px;

  > .el-row {
    .el-col {
      .title {
        padding: 0 10px 10px;
        font-size: 14px;
        text-align: center;
        border-bottom: 2px solid #32bebd;
      }

      .content {
        height: calc(100vh - 200px);
        overflow: scroll;
      }

      .content::-webkit-scrollbar {
        display: none;
      }

      .ml10 {
        margin-left: 15px;
      }

      .ml20 {
        margin-left: 30px;
      }

      .m-item {
        padding: 8px;
        margin-top: 10px;
        cursor: pointer;
        border: 1px solid #dbdbdb;
        border-radius: 4px;

        .title-wrap {
          padding-bottom: 6px;

          .title-wrap-r {
            float: right;
            margin-top: -20px;

            svg {
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }

      span.dot {
        display: inline-block;
        width: 3px;
        height: 12px;
        margin-right: 4px;
        vertical-align: text-top;
        background: #cd9d00;
        border-radius: 4px;
      }

      .active {
        background: #32bebd42;
        border-color: #32bebd9e;
      }
    }

    > .el-col:first-child {
      .assembly {
        padding: 8px;
        margin-top: 20px;
        font-size: 12px;
        color: #7a7a7a;
        text-align: center;
        cursor: pointer;
        border: 1px solid #dbdbdb;
        border-radius: 4px;
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    background: #f5f5f5;
    border-top: 1px dashed #eee;

    button {
      width: 160px !important;
      height: 28px !important;
      margin-right: 40px;
      margin-left: 40px;
      border-radius: 15px;

      > span > svg {
        margin-right: 6px;
      }
    }
  }
}
</style>
